<template>
  <div>
    <div v-wechat-title="$route.meta.title"></div>
    <BlogHeader />
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
        <el-card class="box-card">
          <div class="clearfix">
            <span>头像</span>
          </div>
          <div class="demo-image__placeholder">
            <div class="block">
              <span class="demonstration"></span>
              <el-image
                :src="imgUrl1"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
              <el-image
                :src="imgUrl2"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
              <el-image
                :src="imgUrl3"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
              <el-image
                :src="imgUrl4"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
              <el-image
                :src="imgUrl5"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
              <el-image
                :src="imgUrl6"
                :preview-src-list="srcList"
                style="width: 100px; height: 100px"
                class="img"
              ></el-image>
            </div>
          </div>
        </el-card>
      </el-main>
      <el-aside width="200px"></el-aside>
    </el-container>
    <BlogFooter />
  </div>
</template>

<script>
import BlogHeader from "@/components/BlogHeader.vue";
import BlogFooter from "@/components/BlogFooter.vue";

export default {
  name: "Photo",
  components: { BlogHeader, BlogFooter },
  data() {
    return {
      srcList: [
        "http://47.97.42.77/img/touxiang1.e4a4a420.jpg",
        "http://47.97.42.77/img/touxiang2.f8286929.jpg",
        "http://47.97.42.77/img/touxiang3.32228d87.jpg",
        "http://47.97.42.77/img/touxiang4.13aedceb.jpg",
        "http://47.97.42.77/img/touxiang5.b62a8a64.jpg",
        "http://47.97.42.77/img/touxiang6.c35b05c8.jpg",
      ],
    };
  },
  created() {
    let urlTemp1 = "static/touxiang1.jpg";
    this.imgUrl1 = require("@/" + urlTemp1);
    let urlTemp2 = "static/touxiang2.jpg";
    this.imgUrl2 = require("@/" + urlTemp2);
    let urlTemp3 = "static/touxiang3.jpg";
    this.imgUrl3 = require("@/" + urlTemp3);
    let urlTemp4 = "static/touxiang4.jpg";
    this.imgUrl4 = require("@/" + urlTemp4);
    let urlTemp5 = "static/touxiang5.jpg";
    this.imgUrl5 = require("@/" + urlTemp5);
    let urlTemp6 = "static/touxiang6.jpg";
    this.imgUrl6 = require("@/" + urlTemp6);
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.img {
  padding: 20px;
}
</style>
